<template>
	<div class="u-page" style="background:#f7f7f7">
		<u-navbar :title="Navbar.title" :title-bold="true" title-color="#040503" back-icon-color="#040503" :custom-back="comeback" :background="Navbar.background"
			:border-bottom="false" title-width="380"></u-navbar>
		<div style="height: 100%;" @click="cancelDel">
			<!-- A级成员 -->
			<div class="u-pl-20 u-pb-10 u-pt-10 bg-gray">
				<span class="u-pt-5">A级</span>
				<span class="u-pl-5">
					<u-icon name="question-circle" top="1" size="30" @click="showTips('A')"></u-icon>
				</span>
			</div>
			<div :class="show_add_A?'u-pt-10 u-pb-10 member u-flex select-border':'u-pt-10 u-pb-10 member u-flex'">
				<div v-for="item in members_A" @click.stop="delMember_A(item)" class="user">
					<u-avatar :src="item.partnerAvatarUrl" mode="square" size="100"></u-avatar>
					<u-icon name="close-circle-fill" size="28" v-if="show_del_A"></u-icon>
					<text>{{item.partnerName}}</text>
				</div>
				<div class="add u-ml-10" @click.stop="toSelectUsers_A"></div>
				<div class="reduce u-ml-20" @click.stop="showDel_A"></div>
			</div>
			<!-- B级成员 -->
			<div class="u-pl-20 u-pb-10 u-pt-10 bg-gray">
				<span class="u-pt-5">B级</span>
				<span class="u-pl-5">
					<u-icon name="question-circle" top="1" size="30" @click="showTips('B')"></u-icon>
				</span>
			</div>
			<div :class="show_add_B?'u-pt-10 u-pb-10 member u-flex select-border':'u-pt-10 u-pb-10 member u-flex'">
				<div v-for="item in members_B" @click.stop="delMember_B(item)" class="user">
					<u-avatar :src="item.partnerAvatarUrl" mode="square" size="100"></u-avatar>
					<u-icon name="close-circle-fill" size="28" v-if="show_del_B"></u-icon>
					<text>{{item.partnerName}}</text>
				</div>
				<div class="add u-ml-10" @click.stop="toSelectUsers_B"></div>
				<div class="reduce u-ml-20" @click.stop="showDel_B"></div>
			</div>
			
			<!-- 已验收的成员列表(C级) -->
			<div class="u-pl-20 u-pb-10 u-pt-10 bg-gray" style="display: flex;justify-content: space-between;">
				<span class="u-pt-5">C级（已验收）</span>
				<div class="u-pr-10" style="width: 50%;">
					<u-search placeholder="请输入关键字" v-model="searchStr" :show-action="false" bg-color="#fff"
						@search="getMembersData"></u-search>
				</div>
			</div>
			<div class="u-pt-10 u-pb-10 member u-flex">
				<div v-for="item in members" @click.stop="addMember(item)" class="user">
					<u-avatar :src="item.partnerAvatarUrl" mode="square" size="100"></u-avatar>
					<u-icon name="plus-square-fill" size="28" v-if="show_select"></u-icon>
					<text>{{item.partnerName}}</text>
				</div>
			</div>

			<div class="u-pt-20 save-btn" v-if="viewShare">
				<div style="margin-top: 40rpx">
					<u-button :custom-style="customStyle" @click="goToIndex">
						关闭
					</u-button>
				</div>
			</div>

			<div class="u-pt-20 save-btn" v-else>
				<u-button :custom-style="customStyle" :disabled="isClickBtn" @click="rating">
					确定评级
				</u-button>
				<!-- <div style="margin-top: 40rpx">
					<ShareBtn :docUnid="shareData.docUnid" :url="shareData.url" :route="shareData.route"
						:style="shareData.style" :type="shareData.type" :posterData="shareData.posterData"></ShareBtn>
				</div> -->
			</div>

			<!-- 点击确定评级提示 -->
			<u-modal ref="uModal" title="温馨提示" v-model="rating_show" show-cancel-button confirm-text="确认"
				cancel-text="返回" @confirm="sureRating" confirm-color="#eb5468">
				<div class="u-p-20 u-text-center">
					<p>{{rating_show_content}}</p>
				</div>
			</u-modal>

			<!-- 点击问号弹出提示窗 -->
			<u-modal v-model="tips_show" :content="tipsContent" confirm-color="#eb5468"></u-modal>

		</div>
	</div>
</template>

<script>
	import shareMixins from '@/mixins/share';
	export default {
		mixins: [shareMixins],
		data() {
			return {
				docUnid: '',// 测评任务id
				taskInfo: '',// 测评任务详情
				isClickBtn: false,
				show_select: false,
				members: [],
				show_add_A: false,
				show_del_A: false,
				members_A: [],
				show_add_B: false,
				show_del_B: false,
				members_B: [],
				rating_show: false,
				rating_show_content: '',
				tips_show: false,
				tipsContent: '',
				tipsA: '点击“➕”即可在已验收测评师中评选A级测评师，点击“➖”即可从中移除A级测评师。',
				tipsB: '点击“➕”即可在已验收测评师中评选B级测评师，点击“➖”即可从中移除B级测评师。',
				viewShare: false, // 是否通过分享进来的，是：true
				shareData: {
					docUnid: '',
					url: '',
					route: '',
					style: 0,
					type: 2,
					posterData: {
						imageURL: '', // 商品主图URL地址
						productName: '', // 商品名称
						productPrice: '', // 商品价格
						invitemsg: '邀请参与测评',// 邀请内容。如邀请参与测评，可不传。默认邀请
						type: 'zshb'
					},
					imageUrl: ''
				},
				customStyle: {
					background: '#eb5468 !important',
					color: '#fff !important',
					border: 'none !important'
				},
				Navbar: {
					title: '工作者评级',
					background: {
						backgroundColor: '#f3e4e9',
					}
				},
			};
		},

		onLoad(options) {

			if (this.isNotNull(options.docUnid)) {
				this.docUnid = options.docUnid;
				this.getActivityDetails(options.docUnid);
				this.getMembersData();

				// 是否为只读
				if (this.isNotNull(options.readonly) && options.readonly == '1') {
					this.viewShare = true;
				}
				
			} else {
				this.showMSG('error', '出错啦！')
				setTimeout(() => {
					this.goBack()
				}, 2000)
			}
		},

		methods: {
			
			/**
			 * 获取测评任务详情
			 * @param {Object} docUnid
			 */
			async getActivityDetails(docUnid) {
				let result = await this.$u.api.unifyMiniRestGet({
					systemid: "meily",
					url: "/evaluation/task/info/" + docUnid,
					loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				if (result.code == 200) {
					this.taskInfo = result.data; // 活动详情
					
					// 计算测评报酬
					let minPrice = 0.0;
					let maxPrice = 0.0;
					
					// 是否评级发放报酬。0:否；1:是；默认1
					if(this.taskInfo.enableRating == "1"){
						if(this.isNotNull(this.taskInfo.levelAReward)){
							if(minPrice > parseFloat(this.taskInfo.levelAReward)){
								minPrice = parseFloat(this.taskInfo.levelAReward);
							}
							if(maxPrice < parseFloat(this.taskInfo.levelAReward)){
								maxPrice = parseFloat(this.taskInfo.levelAReward);
							}
							
						} else if(this.isNotNull(this.taskInfo.levelBReward)) {
							if(minPrice > parseFloat(this.taskInfo.levelBReward)){
								minPrice = parseFloat(this.taskInfo.levelBReward);
							}
							if(maxPrice < parseFloat(this.taskInfo.levelBReward)){
								maxPrice = parseFloat(this.taskInfo.levelBReward);
							}
						} else if(this.isNotNull(this.taskInfo.levelCReward)) {
							if(minPrice > parseFloat(this.taskInfo.levelCReward)){
								minPrice = parseFloat(this.taskInfo.levelCReward);
							}
							if(maxPrice < parseFloat(this.taskInfo.levelCReward)){
								maxPrice = parseFloat(this.taskInfo.levelCReward);
							}
						}
						if(maxPrice > minPrice){
							this.price = '&yen;' + minPrice + '~&yen;' + maxPrice;
						} else if(maxPrice == minPrice){
							this.price = maxPrice
						}
					} else {
						this.price = parseFloat(this.taskInfo.reward);
						minPrice = parseFloat(this.taskInfo.reward);
						maxPrice = parseFloat(this.taskInfo.reward);
					}
					
					// 分享组件数据初始化--发起人视角
					let imageUrl = "";
					if(this.isNotNull(this.taskInfo.mainPicture)){
						imageUrl = this.taskInfo.mainPicture;
					} else {
						imageUrl = this.taskInfo.goodsImages.split(",")[0];
					}
					this.shareData.docUnid = docUnid
					this.shareData.url = '/pages_private_scene1/evaluation/rating?docUnid=' + docUnid+'&readonly=1',
					this.shareData.route = this.getCurrentPageUrl(this);
					this.shareData.posterData.imageURL = imageUrl;
					this.shareData.posterData.productName = this.taskInfo.subject;
					this.shareData.posterData.productPrice = maxPrice;
					this.shareData.imageUrl = imageUrl;
					this.shareData.shareTitle = '最高报酬¥' + maxPrice
												+ '！名额' + (this.taskInfo.remainQuota?this.taskInfo.remainQuota:0)
												+ '！' + (this.taskInfo.goodsName?this.taskInfo.goodsName:'')
					
					
				} else {
					this.$u.toast(result.msg)
				}
			},
			
			/**
			 * 获取已验收通过的成员
			 * @param {Object} docUnid
			 */
			async getMembersData() {
				let result = await this.$u.api.unifyMiniRest({
					systemid: "meily",
					url: "/evaluation/signup/pass/list",
					mainId: this.docUnid,
					status: '已验收',
					searchStr: this.searchStr,// 搜索成员
					loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				if (result.code == 200) {
					this.members = result.data
				}
			},

			/**
			 * 点击确定评级弹窗
			 */
			rating() {
				let total = this.members_A.length + this.members_B.length + this.members.length;
				this.rating_show_content = '当前共' + total + '名工作者参与品牌推广任务，其中A级' + this.members_A.length + '人，B级' +
					this.members_B.length + '人，C级' + this.members.length + '人，请确认结果。'
				this.rating_show = true
			},
			
			/**
			 * 确定评级
			 */
			async sureRating() {
				let leveAUserIds = [];
				let leveBUserIds = [];
				let leveCUserIds = [];
				
				if (this.members_A.length > 0) {
					for (let i in this.members_A) {
						leveAUserIds.push(this.members_A[i].partnerId);
					}
				}
				if (this.members_B.length > 0) {
					for (let i in this.members_B) {
						leveBUserIds.push(this.members_B[i].partnerId);
					}
				}
				
				if (this.members.length > 0) {
					for (let i in this.members) {
						if(leveAUserIds.indexOf(this.members[i].partnerId) == -1 || leveBUserIds.indexOf(this.members[i].partnerId)  == -1 ){
							leveCUserIds.push(this.members[i].partnerId);
						}
					}
				}
				
				// 设置按钮不可点击
				this.isClickBtn = true;
				this.showLoading();
				
				let result = await this.$u.api.unifyMiniRest({
					systemid: "meily",
					url: "/evaluation/signup/rating",
					mainId: this.taskInfo.id,
					leveAUserIds: leveAUserIds,
					leveBUserIds: leveBUserIds,
					leveCUserIds: leveCUserIds,
					loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				if (result.code == 200) {
					this.showMSG('success', result.msg)
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages_private_scene1/evaluation/ranking_list?docUnid=' + this.docUnid
						})
					}, 1500)
				} else {
					this.isClickBtn = false;
					this.showMSG('none', result.msg)
				}
			},

			/**
			 * 点击加号区域选中并且已验收成员可添加状态
			 */
			toSelectUsers_A() {
				this.show_select = true
				this.show_add_A = true
				this.show_add_B = false
				this.cancelDelSimple() //清除删除状态
			},

			toSelectUsers_B() {
				this.show_select = true
				this.show_add_A = false
				this.show_add_B = true
				this.cancelDelSimple() //清除删除状态
			},

			/**
			 * 点击减号头像变为可删除操作
			 */
			showDel_A() {
				this.show_del_A = true
				this.show_del_B = false
				this.cancelAdd()
			},

			showDel_B() {
				this.show_del_A = false
				this.show_del_B = true
				this.cancelAdd()
			},

			/**
			 * 清除新增选中状态
			 */
			cancelAdd() {
				this.show_add_A = false
				this.show_add_B = false
				this.show_select = false
			},

			/**
			 * 点击空白处将可删除的头像样式恢复原样
			 */
			cancelDel() {
				this.show_del_A = false
				this.show_del_B = false
				this.cancelAdd()
			},

			cancelDelSimple() {
				this.show_del_A = false
				this.show_del_B = false
			},

			/**
			 * 确认删除成员
			 */
			delMember_A(item) {
				if (!this.show_del_A) {
					// 如果不是删除成员，则跳转到该用户的不可编辑的提交成果页
					this.$u.route("/pages_private_scene1/evaluation/submit_results?docUnid="+ item.id + "&readOnly=1&userId=" + item.partnerId);
					return;
				}
				var length = this.members_A.length;
				for (var i = 0; i < length; i++) {
					if (this.members_A[i].id == item.id) {
						if (i == 0) {
							this.members_A.shift(); //删除并返回数组的第一个元素
						} else if (i == length - 1) {
							this.members_A.pop(); //删除并返回数组的最后一个元素
						} else {
							this.members_A.splice(i, 1); //删除下标为i的元素
						}
						this.members.push(item)
					}
				}
			},

			delMember_B(item) {
				if (!this.show_del_B) {
					// 如果不是删除成员，则跳转到该用户的不可编辑的提交成果页
					this.$u.route("/pages_private_scene1/evaluation/submit_results?docUnid="+ item.id + "&readOnly=1&userId=" + item.partnerId);
					return;
				}
				var length = this.members_B.length;
				for (var i = 0; i < length; i++) {
					if (this.members_B[i].id == item.id) {
						if (i == 0) {
							this.members_B.shift(); //删除并返回数组的第一个元素
						} else if (i == length - 1) {
							this.members_B.pop(); //删除并返回数组的最后一个元素
						} else {
							this.members_B.splice(i, 1); //删除下标为i的元素
						}
						this.members.push(item)
					}
				}
			},
			
			/**
			 * 添加用户到指定的等级列表中
			 */
			addMember(item) {
				if (this.show_add_A && this.show_select) {
					if (this.members_A.length < this.taskInfo.levelAQuota) {
						this.members_A.push(item)
						this.delMember(item)
					} else {
						this.showMSG("none", "A级成员已达上限")
					}
				} else if (this.show_add_B && this.show_select) {
					if (this.members_B.length < this.taskInfo.levelBQuota) {
						this.members_B.push(item)
						this.delMember(item)
					} else {
						this.showMSG("none", "B级成员已达上限")
					}
				} else {
					// 如果不是删除成员，则跳转到该用户的不可编辑的提交成果页
					this.$u.route("/pages_private_scene1/evaluation/submit_results?docUnid="+ item.id + "&readOnly=1&userId=" + item.partnerId);
					return;
				}
			},

			delMember(item) {
				var length = this.members.length;
				for (var i = 0; i < length; i++) {
					if (this.members[i].id == item.id) {
						if (i == 0) {
							this.members.shift(); //删除并返回数组的第一个元素
						} else if (i == length - 1) {
							this.members.pop(); //删除并返回数组的最后一个元素
						} else {
							this.members.splice(i, 1); //删除下标为i的元素
						}
					}
				}
			},

			/**
			 * 点击问号弹出提示
			 */
			showTips(type) {
				if (type == 'A') {
					this.tipsContent = this.tipsA
					this.tips_show = true
				} else if (type == 'B') {
					this.tipsContent = this.tipsB
					this.tips_show = true
				}
			},

			/**
			 * 前往首页
			 */
			goToIndex() {
				uni.reLaunch({
					url: '/pages/index/index'
				});
			},
			
			showLoading() {
				wx.showLoading({
				  title: '提交中...',
				  icon: 'none',
				});
			},
			 
			hideLoading() {
				wx.hideLoading();
			},

		},
	};
</script>

<style scoped>
	.member {
		background-color: white;
		flex-wrap: wrap;
		padding-left: 25rpx;
	}

	.del-btn {
		width: 94%;
		padding-left: 5%;
	}

	.save-btn {
		width: 94%;
		padding-left: 5%;
	}

	.add {
		width: 100rpx;
		height: 100rpx;
		border: 1px dashed #BCBCBC;
		transition: color .25s;
		position: relative;
		color: #BCBCBC;
	}

	.add::before {
		content: '';
		position: absolute;
		left: 50%;
		top: 50%;
		width: 55rpx;
		margin-left: -28rpx;
		margin-top: -5rpx;
		border-top: 2px solid;
	}

	.add::after {
		content: '';
		position: absolute;
		left: 50%;
		top: 50%;
		height: 50rpx;
		margin-left: -5rpx;
		margin-top: -28rpx;
		border-left: 2px solid;
	}

	.reduce {
		width: 100rpx;
		height: 100rpx;
		border: 1px dashed #BCBCBC;
		transition: color .25s;
		position: relative;
		color: #BCBCBC;
	}

	.reduce::before {
		content: '';
		position: absolute;
		left: 50%;
		top: 50%;
		width: 55rpx;
		margin-left: -28rpx;
		margin-top: -5rpx;
		border-top: 2px solid;
	}

	.user {
		padding: 20rpx;
		width: 140rpx;
		text-align: center;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.bg-gray {
		background-color: #ededed;
	}

	.slot-content {
		font-size: 28rpx;
		color: #bcbcbc;
		text-align: center;
		margin: 0 auto;
	}

	.select-border {
		border: 1px dashed #f1b13deb;
	}
</style>
